<template>
  <div>
    <el-dialog
      title="评审记录"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
      @closed="resetForm()"
    >
      <div>
        <div class="status">
          评审意见：
          <span class="color-success" v-show="checkedData.resStatus != 2"
            >建议通过</span
          >
          <span class="color-danger" v-show="checkedData.resStatus == 2"
            >建议修改后通过</span
          >
        </div>
        <div class="score" v-show="expertsTaskItemList.length">
          <ul>
            <li v-for="v in expertsTaskItemList" :key="v.id">
              <p class="score-label">{{ v.scoreContent }}：</p>
              <span class="score-des">{{ v.score }} 分</span>
            </li>
          </ul>
        </div>
        <!-- <div class="approver-opinion" v-html="content"></div> -->
        <div class="content-wrap">
          <div class="content-wrap-in" v-html="content"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      dialogVisible: false,
      addOrEdit: 1,
      checkedData: {},
      expertsTaskItemList: [],
      content: '',
    }
  },
  mounted() {
    Bus.$on('showDialogReviewHistory', (v) => {
      this.checkedData = v
      this.expertsTaskItemList = v.expertsTaskItemList.filter((v) =>
        v.hasOwnProperty('scoreContent'),
      )
      if (v.content) {
        this.content = v.content
          .replace(/&nbsp;/gi, '') //清除空格
          .replace(/\s+style="[^"]*"/g, '') //清除style样式
          .replace(
            /\<img/gi,
            '<img style="max-width: 90%;margin: 10px auto;display: inherit;border: 1px solid #eee;"',
          ) //设置图片class
      }
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogReviewHistory')
  },
  methods: {
    //重置表单
    resetForm() {
      this.checkedData = {}
    },
  },
}
</script>
<style scoped lang="scss">
.approver-opinion {
  width: 100%;
  min-height: 300px;
  padding: 0 10px;
  border: 1px solid #eee;
  margin-top: 20px;
  box-sizing: border-box;
}
.score {
  margin-top: 10px;
  padding: 10px 20px;
  background: #f7f7f7;
  .score-label {
    max-width: 50%;
    display: inline-block;
  }
  .score-input {
    margin: 0 10px;
  }
  .score-des {
    color: var(--colorH1);
    margin-left: 10px;
  }
}
.score ul li {
  line-height: 32px;
}
.score-wrap {
  margin-top: 20px;
  padding: 20px;
  padding-bottom: 5px;
  background: #f7f7f7;
}
.content-wrap {
  margin-top: 20px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: scroll;
  padding: 20px;
  background: #f7f7f7;
  box-sizing: border-box;
  .content-wrap-in {
    color: #333;
    text-indent: 2em;
    font-size: 16px !important;
    line-height: 2;
    span {
      color: #333;
      text-indent: 2em;
      font-size: 16px;
      line-height: 2;
    }
    .img-style {
      max-width: 90%;
      margin: 0 auto;
      display: inherit;
      font-family: '微软雅黑';
    }
  }
}
</style>